<template>
  <div>
    <el-row :gutter="20" class="out-border">
      <div v-for="item in serverList.attr" :key="item.type">
        <el-col :span="6" style="background: #f2f6fc; color: #606266"
          ><div class="grid-content bg-purple">{{ item.label_name }}</div></el-col
        >
        <el-col :span="18" v-if="item.type === 'images'">
          <img :src="serverList.infoData[item.value[0]]" alt="" v-if="serverList.infoData[item.value[1]] == ''" width="80" />
          <img :src="img" alt="" v-for="(img, i) in serverList.infoData[item.value[1]].split(',')" :key="i" v-else width="80" />
        </el-col>
        <el-col :span="18" v-else
          ><div class="grid-content bg-purple" style="padding: 10px">{{ serverList.infoData[item.value] }}</div></el-col
        >
      </div>
    </el-row>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    serverData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      serverList: [],
    }
  },
  methods: {
    setInfo() {
      this.serverList = this.serverData
    },
  },
  created() {
    this.setInfo()
  },
}
</script>
<style lang="scss" scoped>
.server-border {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
}
</style>
